<style lang="scss" >
    .scoped-header{
        width: 100%;
        box-shadow: 1px 0 3px rgba(black,.2);
        overflow: hidden;
        height: 78px;
        .fold{
            position: absolute;
            bottom:0;
            left: 50%;
            transform: translate3d(-50%,100%,0);
            width: 80px;
            z-index: 1;
            background-color: rgb(246, 244, 238);
        }
        .el-tabs__header{
            // margin-bottom: 0;
            border-bottom: 0;
            .el-tabs__active-bar{//底部活动线条
                background-color: white;
            }
            .el-tabs__item{//标签
                color: rgba(white,.8);
                &:hover{
                    color: white;
                }
            }
        }

        .nav-main{
            padding: 10px 23px;
            font-size: 16px;
            display: inline-flex;
            align-items: center;
            height: 100%;
            position: relative;
            &.router-link-active,{
                font-weight: bold;
                &::after{
                    content: '';
                    width: 50px;
                    height: 2px;
                    position: absolute;
                    bottom: 5px;
                    left: 50%;
                    transform: translateX(-50%);
                    z-index: 1;
                    background: #fff;
                }
            }
        }

        .logout{
            color: #fff;
            opacity: .7;
            display: flex;
            padding: 5px;
            align-items: center;
            cursor: pointer;
            &:hover{
                opacity: 1;
            }
        }

        .ui-back-button{
            border:1px solid white;
            opacity: 0.4;
            color:white;
            padding: 10px;
            position: absolute;
            top: 3px;
            left: 7px;
            transition: .3s;
            &:hover{
                opacity: 1;
            }
        }
    }
</style>
<template>
    <div class="scoped-header relative bg-orange f-color-white" style="z-index:2">
        <div class="ui-center-width flex col-center row-between pl20 pr20 h-100"> 
            <!-- logo -->
            <div class="flex col-center h-100">
                <img src="~@/icons/logo.png" style="height:90%">
                <span class="pl15 f21">王大虎</span>
            </div>
            <div class="flex-1 flex row-right mr50 h-100">
                <!-- 主菜单 -->
                <div class="flex col-center h-100">
                    <router-link to="/home" class="nav-main">首页</router-link>
                    <router-link to="/shuoshi" class="nav-main">大虎说事</router-link>
                    <router-link to="/cepin" class="nav-main">大虎测评</router-link>
                    <router-link to="/caijinbao" class="nav-main">彩金宝</router-link>
                    <router-link v-if="userInfo.user_login" to="/user-all" class="nav-main">个人中心</router-link>
                </div>
            </div>

            <!-- 个人信息 -->
            <router-link to="/user-all" v-if="userInfo.user_login" class="flex col-center p10 f16">
                <ui-img :url="userInfo.avatar" size="40px" class="ui-circle mr15"></ui-img>
                <span class="mr20">欢迎,{{userInfo.user_nicename || userInfo.user_login}}</span>
                <el-tooltip class="item" effect="dark" content="登出" placement="left" :open-delay="1000">
                    <a class="logout" @click="logout">
                        <icon name="power-off" class="mt3"></icon>
                    </a>
                </el-tooltip>
            </router-link>
            <router-link v-else to="/login" class="p10 f16">登录 | 注册</router-link>
        </div>
    </div>
</template>
<script>
    export default {
        methods: {
            logout(){
                this.$http.get('index.php?g=home&m=Users&a=logout')
                .then(({data})=>{
                    console.log('登出',data)
                    if (data.code===1) {
                        this.$router.replace('/login')
                    }
                })
            }
        },
        computed: {
            userInfo(){
                return this.$store.state.userInfo
            },
        },
    }
</script>